<!--
 * @Author: panda-hbd 1511539537@qq.com
 * @Date: 2022-11-16 11:25:51
 * @LastEditors: panda-hbd 1511539537@qq.com
 * @LastEditTime: 2022-11-16 12:03:46
 * @FilePath: \text-online-system\src\components\ThemeItem.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="themItem" >
        <router-link to="/index/courseDetail/details" @click = "setCurrentDiscusstionId(data.id)"><el-link :underline="false" class="title">{{data.title}}</el-link></router-link>
        <div class="pulishInfo">
            <div> 
                <el-avatar :size="30" src="https://img2.baidu.com/it/u=400795060,3854124574&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" />
                <span class="pulisher_name">{{data.name}}</span>
                <span class="pulish_time">{{data.pulishTime}}</span>
            </div>
            <div class="data">
                <span>浏览：{{data.views}}</span>
                <span>回复：{{data.replies}}</span>
            </div>
        </div>
        <el-divider />
    </div>
</template>

<script>

import { mapMutations } from 'vuex'
export default {
    name: 'ThemeItem',

    props:["data"],

    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
        //vuex 辅助函数
        ...mapMutations(['setCurrentDiscusstionId'])
    },
};
</script>

<style scoped>
 .themItem{
    width:100%;
    box-sizing:border-box;
    
 }

.title{
    margin-bottom:1.3rem;
    font-weight:600
}

.pulishInfo{
    display:flex;
    justify-Content:space-between
}

.pulishInfo div{
    display:flex;
    justify-Content:space-between;
    align-items: center;
}

.pulishInfo div *{
    margin-right:0.6rem
}

.pulisher_name{
    font-size:13px;
    
}

.pulish_time{
    font-size:12px;
    color:#A2A2A2
}

.data{
    font-size:13px;
    color:gray
}

</style>